<template>
    <div :class="{ hidden: hidden }" class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="background"
            :layout="layout"
            :page-sizes="pageSizeList"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { PropType } from 'vue'
//import { scrollTo } from "@/utils/scroll-to";
//todo: 增加scrollTo 功能
const props = defineProps({
    total: {
        required: true,
        type: Number as PropType<number>,
        default: 0,
    },
    currentPage: {
        type: Number,
        default: 1,
    },
    pageSzie: {
        type: Number,
        default: 20,
    },
    pageSizeList: {
        type: Array as PropType<number[]>,
        default() {
            return [10, 20, 30, 50]
        },
    },
    layout: {
        type: String,
        default: 'total, sizes, -> , prev, pager ,next, jumper',
    },
    background: {
        type: Boolean,
        default: true,
    },
    // autoScroll: {
    //     type: Boolean,
    //     default: true,
    // },
    hidden: {
        type: Boolean,
        default: false,
    },
})

const emit = defineEmits(['pagination', 'update:currentPage', 'update:pageSzie'])
//已双向绑定了querParmas.pageNum
const currentPage = useVModel(props, 'currentPage', emit)
//已双向绑定了querParmas.pageSize
const pageSize = useVModel(props, 'pageSzie', emit)

function handleSizeChange(val: number) {
    pageSize.value = val
    currentPage.value = 1
    emit('pagination')
    // if (props.autoScroll) {
    //     scrollTo(0, 800)
    // }
}

function handleCurrentChange(val: number) {
    currentPage.value = val
    emit('pagination')
    // if (props.autoScroll) {
    //     scrollTo(0, 800)
    // }
}
</script>

<style lang="scss" scoped>
.pagination {
    padding: 12px;

    &.hidden {
        display: none;
    }
}
</style>
